<template>
	<view>
		<u-sticky  bgColor="#fff">
			<view class="menu">
				<view v-for="item in menu.data" :key="item.status" 
					class="menu-item" :class="{active: item.status == menu.nowStatus}"
					@click="changeMenu(item.status)">
					<view>{{ item.text }}</view>
					<view class="underline"></view>
				</view>
			</view>
			
			<view class="date">
				<view v-for="(item, index) in dateObj.data" :key="index"
					class="date-item" :class="{active: index == dateObj.nowIndex}"
					@click="changeDate(index, item.y, item.m, item.d)">
					<view class="date-item_week">周{{ formatWeek(item.week) }}</view>
					<view class="date-item_date activeBg">{{ item.d }}</view>
				</view>
			</view>
		</u-sticky>
	

		
		<view class="lesson">
			<view v-for="(item, index) in lesson.data" :key="index" class="lesson-box">
				<view class="lesson-item_time">
					{{ formatTime(item.sTime) }} ~ {{ formatTime(item.eTime) }}
				</view>
				
				<view class="lesson-item">
					<view class="lesson-item-1">
						<image :src="item.picture" class="lesson-item_picture" mode="aspectFill"></image>
					</view>
					
					<view class="lesson-item-2">
						<view class="lesson-item-2_title">{{ item.title }}</view>
						
						<view style="display: flex;" class="lesson-font">
							<view>{{ item.teacher }}</view>
							
							<view style="display: flex; margin-left: 20upx;">
								<text style="margin-right: 5upx;">难度</text>
								<u-rate :count="5" v-model="item.difficulty"
									size="28" >
								</u-rate>
							</view>
						</view>
								
						<view class="lesson-item-2_other lesson-font">
							{{ item.other }}
						</view>
					</view>
				</view>
				
				<view class="lesson-item-bottom">			
					<button size="mini" class="btn_yueke" @click="reservation(item._id)" v-if="reserved(item._id)">预约</button> 					
					<button size="mini" class="btn_yueke btn_yueke_0" @click="canelReservation(item._id)" v-else>取消预约</button>
					<button size="mini" class="btn_sub-man">
						<view>
							0 人
						</view>
					</button>
				</view>
			</view>
		</view>
		
		<view v-if="lesson.data.length == 0" class="noMore">
			<text>暂无课程~</text>
		</view>

		<!-- 
		<u-modal :show="modal.show" :title="modal.title"
			 confirmColor="#414141" :zoom="true"
			 :closeOnClickOverlay="true"
			@close="hideSubMen()" @confirm="hideSubMen()">
			<view class="modal">
				<view v-for="item in modal.content" class="modal-item">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</u-modal> -->
	</view>
</template>

<script>
	const menuCloud = uniCloud.importObject('menu')
	const lessonCloud = uniCloud.importObject('lesson')
	const memberCloud = uniCloud.importObject('member')
	const reservationCloud = uniCloud.importObject('reservation')
	export default {
		data() {
			return {
				menu: {
					data: [],
					nowStatus: 0
				},
				dateObj: {
					data: [],
					week: '',
					nowIndex: 0,
					nowDate: ''
				},
				lesson: {
					data: []
				},
				// modal: {
				// 	show: false,
				// 	title: '',
				// 	content: ''
				// },
				resClass: [], // 预约的课程
				user: {}
			}
		},
		methods: {
			init() {
				this.getDate()
				this.getMenu()
				this.getWeek()
			},
			getMenu() {
				menuCloud.get().then(({data}) => {
					this.menu.data = data
					this.menu.nowStatus = data[0].status
					this.getLesson()
				})
			},
			getWeek() {
				var weekMap = new Map()
				weekMap.set(0, '日')
				weekMap.set(1, '一')
				weekMap.set(2, '二')
				weekMap.set(3, '三')
				weekMap.set(4, '四')
				weekMap.set(5, '五')
				weekMap.set(6, '六')
				this.dateObj.week = weekMap
			},
			getDate() {
				const now = new Date()
				let y = now.getFullYear()
				let _m = now.getMonth() + 1
				let m = _m < 10 ? ('0' + _m) : _m
				let _d = now.getDate()
				let d = _d < 10 ? ('0' + _d) : _d
				
				// 今天日期
				this.dateObj.data.push({
					y: y,
					m: m,
					d: d,
					week: now.getDay()
				})
				
				// 今天日期
				this.dateObj.nowDate = y + '-' + m + '-' + d
										
				// 往后6天
				for (let i = 0; i < 6; i++) {
					now.setDate(now.getDate() + 1)
					
					y = now.getFullYear()
					_m = now.getMonth() + 1
					m = _m < 10 ? ('0' + _m) : _m
					_d = now.getDate()
					d = _d < 10 ? ('0' + _d) : _d
					this.dateObj.data.push({
						y: y,
						m: m,
						d: d,
						week: now.getDay()
					})
				}
			},
			getLesson() {		
				this.lesson.data = []
				
				lessonCloud.getByStatus(this.menu.nowStatus).then(({data}) => {
					for (let item of data) {
						if ('0000-00-00' == item.sTime.split(' ')[0]) {
							this.lesson.data.push(item)
							continue
						}
						
						if (this.dateObj.nowDate == item.sTime.split(' ')[0]) {
							this.lesson.data.push(item)
						}
					}
				})
			},
			getUser() {
				if (Object.keys(this.user).length === 0) {
					this.user = uni.getStorageSync('user')
				}
			},
			getReservation() {
				reservationCloud.get({
					memberId: this.user.id,
					resDate: this.dateObj.nowDate
				}).then(({data}) => {
					for (let item of data) {						
						this.resClass.push(item.lessonId)
					}
				})
			},
			changeMenu(status) {
				this.menu.nowStatus = status
				this.pageTurn()
			},
			changeDate(index, y, m, d) {
				this.dateObj.nowIndex = index
				this.dateObj.nowDate = y + '-' + m + '-' + d
				this.pageTurn()
				
			},
			pageTurn() {
				this.getLesson()
				this.getReservation()
				this.resClass = []
			},
			formatWeek(num) { // 将星期数字转换为文字
				return this.dateObj.week.get(num)
			},
			formatTime(daytime) { // 格式化时间
				var time = daytime.split(' ')[1]
				var hour = time.split(':')[0]
				var minute = time.split(':')[1]
				return hour + ':' + minute
			},
			/**
			 * 预约课程
			 * @param {String} id 课程id
			 */
			reservation(id) {
				const user = uni.getStorageSync('user')
				
				// 未登录跳转到登录页面
				if (!user) {
					uni.navigateTo({
						url: '/pagesA/userLogin/userLogin'
					})
					return 
				} 
				
				if (user.identity !== 'member') {
					uni.showToast({
						icon: 'none',
						title: '只有会员才能预约课程'
					})
					return 
				}
				
				reservationCloud.add({
					memberId: this.user.id,
					lessonId: id,
					resDate: this.dateObj.nowDate
				}).then(() => {
					this.getReservation()
				})		
			},
			canelReservation(id) {
				reservationCloud.canel({
					memberId: this.user.id,
					lessonId: id,
					resDate: this.dateObj.nowDate
				}).then(() => {
					this.getReservation()
					this.resClass.splice(this.resClass.indexOf(id), 1)
				})
			},
			// showSubMan(subMan) {
			// 	var men = []
			// 	for (let id of subMan) {
			// 		memberCloud.getById(id).then(({data}) => {
			// 			men.push(data[0])
			// 		})
			// 	}
				
			// 	this.modal = {
			// 		show: true,
			// 		content: men,
			// 		title: '约课人数'
			// 	}
			// },
			// hideSubMen() {
			// 	this.modal = {
			// 		show: false,
			// 		content: '',
			// 		title: ''
			// 	}
			// }
		},
		computed: {
			reserved() {
				return (lessonId) => this.resClass.indexOf(lessonId) === -1
			}
		},
		watch: {
			user() {
				this.getReservation()
			}
		},
		onShow() {
			this.getUser()
		},
		created() {		
			this.init()
		}
	}
</script>

<style>
	page{
		background-color: #F4F4F4;
	}	
	
	.menu{
		display: flex;
		justify-content: space-around;
		border-bottom: 1px solid #E6E6E6;
		font-size: 28upx;
		background-color: #fff;
		padding-top: 10upx;
	}
	
	.menu-item{
		width: 100upx;
		text-align: center;
	}
	
	.menu .active .underline{
		width: 100%;
		height: 5upx;
		background-color: #FFBB12;
		border-radius: 20upx;
	}
	
	.date{
		padding: 30upx 0;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
		border-bottom: 1px solid #E6E6E6;
	}
	
	.date-item{
		text-align: center;
	}
	
	.date-item_week{
		font-size: 23upx;
	}
	
	.date-item_date{
		margin-top: 10upx;
		padding: 10upx;
	}
	
	.date .active .activeBg{
		background-color: #414141;
		color: #fff;
		border-radius: 15upx;
	}
	
	.lesson{
		margin-top: 20upx;
	}
	
	.lesson-box{
		padding: 50upx 20upx 20upx;
		background-color: #fff;
		border-radius: 8upx;
		margin: 20upx 25upx;
	}
	
	.lesson-item{
		display: flex;
		flex-wrap: nowrap;
	}
	
	.lesson-item-1{
		width: 100upx;
		height: 100upx;
	}
	
	.lesson-item_time{
		width: 250upx;
		background: linear-gradient(to right, #E7E7E7, transparent);
		position: relative;
		top: -30upx;
		left: -20upx;
		font-size: 27upx;
		font-weight: 600;
		padding-left: 5upx;
	}
	
	.lesson-item_picture{
		--size: 90upx;
		width: var(--size);
		height: var(--size);
		border-radius: 50%;
	}
	
	.lesson-item-2{
		width: calc(100% - 100upx);
		padding: 0 30upx 0 50upx;
	}
	
	.lesson-item-2_title{
		font-weight: 600;
		margin-bottom: 40upx;
	}
	
	.lesson-item-2_other{
		width: 400rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: rgb(145, 149, 157);
	}
	
	.lesson-font{
		font-size: 25upx;
	}
	
	.lesson-item-bottom{
		margin-top: 20upx;
		text-align: right;
	}
	
	.btn_yueke{
		background-color: #444444;
		color: #FFF;
		border: none;
		border-radius: 30upx;
		margin-right: 10upx;
	}
	
	.btn_yueke_0{
		background-color: #626262;
	}
	
	.btn_sub-man{
		background-color: #FFBB12;
		border-radius: 30upx;
	}
	
	.noMore{
		text-align: center;
		color: #999AAA;
	}
	
	/* .modal{
		display: flex;
		flex-wrap: wrap;
	}
		
	.modal-item{
		font-size: 25upx;
		margin: 10upx;
		background-color: #E7E7E7;
		padding: 10upx;
		border-radius: 8upx;
	} */
</style>